<template>
  <div class="container">
    <BasicModal
      @register="register"
      :title="title"
      width="800px"
      :min-height="600"
      :destroyOnClose="true"
      :canFullscreen="false"
      @ok="handleOk"
    >
      <div class="title-box">
        <span class="title">添加学院</span>
        <span class="desc">选择学院到毕业院校中</span>
      </div>
      <CustomTransfer
        @selected-value="handleSelectedValue"
        @pagination="handlePagination"
        @search="handleSearch"
        :pagination-data="paginationData"
        :option="option"
        :search-loca="true"
      ></CustomTransfer>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { onMounted, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import CustomTransfer from './index.vue';
  import { OptionsType } from './types';

  const title = ref('');
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const paginationData = ref();
  const option = ref<OptionsType[]>([]);

  const [register, { closeModal }] = useModalInner(async (data) => {
    paginationData.value = { current: 1, total: 20, pageSize: 10 };
    option.value = [
      { label: '哈哈哈', value: '1' },
      { label: '嘻嘻嘻', value: '2' },
      { label: '啦啦啦', value: '3' },
      { label: '哦哦哦', value: '4' },
      { label: '呃呃呃', value: '5' },
      { label: '嘭嘭嘭', value: '6' },
      { label: '钱钱钱', value: '7' },
      { label: '来来来', value: '8' },
      { label: 'uuu', value: '9' },
      { label: '热热热1', value: '10' },
    ];
  });

  const handleOk = () => {
    closeModal();
  };

  const handleSelectedValue = (selectedValue: string) => {
    console.log(selectedValue);
  };

  const handlePagination = ({ current, pageSize }) => {
    if (current === 1) {
      option.value = [
        { label: '哈哈哈', value: '1' },
        { label: '嘻嘻嘻', value: '2' },
        { label: '啦啦啦', value: '3' },
        { label: '哦哦哦', value: '4' },
        { label: '呃呃呃', value: '5' },
        { label: '嘭嘭嘭', value: '6' },
        { label: '钱钱钱', value: '7' },
        { label: '来来来', value: '8' },
        { label: 'uuu', value: '9' },
        { label: '热热热1', value: '10' },
        { label: '热热热2', value: '11' },
        { label: '热热热3', value: '12' },
        { label: '热热热4', value: '13' },
        { label: '热热热5', value: '14' },
      ];
    } else {
      option.value = [
        { label: 'AAA', value: 'A' },
        { label: 'BB', value: 'BB' },
      ];
    }
  };
  const handleSearch = (keyWord: string) => {};
</script>

<style lang="less" scoped>
  .container {
  }
  .title-box {
    padding: 10px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .title {
      font-size: 18px;
    }
    .desc {
      font-size: 14px;
    }
  }
</style>
